import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import css from './history.module.scss'
export default class SearchHistory extends PureComponent {
    
    static propTypes = {
        list: PropTypes.array.isRequired,
        onSelect: PropTypes.func,
        onClear: PropTypes.func
    }

    static defaultProps = {
        list: []
    }

    handleSelect = item => {
        typeof this.props.onSelect === 'function' && this.props.onSelect(item.value)
    }
    
    handleClear = () => {
        typeof this.props.onClear === 'function' && this.props.onClear()
    }

    render() {
        const { list } = this.props
        const hasList = list.length > 0
        return (
            <div className={css["wrap"]}>
                <h2 className="title">历史搜索</h2>
                {
                    hasList && (
                        <>
                            <ul className="list">
                                {
                                    list.map(item => {
                                        return (
                                            <li className="list-item" key={item.timestamp} onClick={() => this.handleSelect(item)}>
                                                <i className="fa fa-history"></i>{item.value}
                                            </li>
                                        )
                                    })
                                }
                            </ul>

                            <div className="action">
                                <span onClick={this.handleClear}>清除历史记录</span>
                            </div>
                        </>
                    )
                }                                
            </div>
        )
    }
}
